﻿<UserControl x:Class="MSDNWebcast.Views.VideoPlayer" x:Name="RootControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MSDNWebcast.Converter">
    <UserControl.Resources>
        <!-- SimpleStyles: Button -->
        <local:RectangleToLargestSquareConverterX x:Key="RectangleToLargestSquareConverterX" />
        <local:RectangleToLargestSquareConverterY x:Key="RectangleToLargestSquareConverterY" />

        <Style TargetType="{x:Type Button}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Border" >
                            <ContentPresenter Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center"
                            RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter TargetName="Border" Property="BorderBrush" Value="#202020" />
                            </Trigger>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter TargetName="Border" Property="BorderBrush" Value="#202020" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="Height" Value="12"/>
            <Setter Property="Width" Value="12"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Grid>
                            <Ellipse x:Name="Ellipse" Fill="{DynamicResource NormalBrush}" Stroke="{DynamicResource NormalBorderBrush}" StrokeThickness="0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Ellipse"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Ellipse"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
            <Setter Property="Background" Value="{DynamicResource LightBrush}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Grid x:Name="GridRoot">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <!-- TickBar shows the ticks for Slider -->
                            <TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{DynamicResource GlyphBrush}"/>
                            <Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#125164" CornerRadius="2"/>

                            <!-- The Track lays out the repeat buttons and thumb -->
                            <Track Grid.Row="1" x:Name="PART_Track">
                                <Track.Thumb>
                                    <Thumb Style="{DynamicResource ThumbStyle}"/>
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Cursor="Hand" Command="Slider.IncreaseLarge" Height="4"/>
                                </Track.IncreaseRepeatButton>
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Cursor="Hand" Command="Slider.DecreaseLarge" Height="4">
                                        <RepeatButton.Background>
                                            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                                <GradientStop Color="#FF92CEE8" Offset="0.504"/>
                                                <GradientStop Color="#FF1C83B1" Offset="1"/>
                                                <GradientStop Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" Offset="0.017"/>
                                                <GradientStop Color="#FF1F84B2" Offset="1"/>
                                                <GradientStop Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" Offset="0.987"/>
                                            </LinearGradientBrush>
                                        </RepeatButton.Background>
                                    </RepeatButton>
                                </Track.DecreaseRepeatButton>
                            </Track>

                            <TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TickPlacement" Value="TopLeft">
                                <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="BottomRight">
                                <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="Both">
                                <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>
                                <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>
                            </Trigger>

                            <!-- Use a rotation to create a Vertical Slider form the default Horizontal -->
                            <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="LayoutTransform" TargetName="GridRoot">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                                <!-- Track rotates itself based on orientation so need to force it back -->
                                <Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="VieoPlayer">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:00.4" Storyboard.TargetName="btnFullscreen" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
                    <DoubleAnimation Duration="0:0:00.4" Storyboard.TargetName="panel" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="VieoPlayer">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:00.4" Storyboard.TargetName="btnFullscreen" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
                    <DoubleAnimation Duration="0:0:00.4" Storyboard.TargetName="panel" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid Name="LayoutGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Name="mainGrid" Grid.Column="1" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.Width>
                <MultiBinding Converter="{StaticResource RectangleToLargestSquareConverterX}">
                    <Binding ElementName="RootControl" Path="ActualWidth" UpdateSourceTrigger="PropertyChanged" Mode="OneWay" />
                    <Binding ElementName="RootControl" Path="ActualHeight" UpdateSourceTrigger="PropertyChanged" Mode="OneWay" />
                </MultiBinding>
            </Grid.Width>
            <Grid.Height>
                <MultiBinding Converter="{StaticResource RectangleToLargestSquareConverterY}">
                    <Binding ElementName="RootControl" Path="ActualWidth" UpdateSourceTrigger="PropertyChanged" Mode="OneWay" />
                    <Binding ElementName="RootControl" Path="ActualHeight" UpdateSourceTrigger="PropertyChanged" Mode="OneWay" />
                </MultiBinding>
            </Grid.Height>
            <Rectangle HorizontalAlignment="Stretch" Fill="#0d5087" VerticalAlignment="Stretch" Margin="-300,-200,-200,-100" StrokeThickness="0">
                <Rectangle.OpacityMask>
                    <RadialGradientBrush>
                        <GradientStop Color="#15FFFFFF" Offset="1"/>
                        <GradientStop Color="#8FFFFFFF" Offset="0.481"/>
                        <GradientStop Color="Black" Offset="0"/>
                    </RadialGradientBrush>
                </Rectangle.OpacityMask>
            </Rectangle>
            
            <Image x:Name="logoPanel" VerticalAlignment="Center" HorizontalAlignment="Center" Height="46" Source="..\Images\logo.png"/>
            
            <Grid x:Name="VieoPlayer" Visibility="Collapsed" Margin="10">
                <MediaElement Name="mediaElement" HorizontalAlignment="Stretch" Visibility="Hidden"  VerticalAlignment="Stretch" MediaOpened="mediaElement_MediaOpened"
                          Width="Auto" Height="Auto" LoadedBehavior="Manual" ScrubbingEnabled="True" Source="{Binding Path=VideoPath}"></MediaElement>
                <DockPanel Name="panel" Opacity="0" Margin="5,5" Height="24" DockPanel.Dock="Left" VerticalAlignment="Bottom">
                    <DockPanel.Background>
                        <SolidColorBrush Color="#042a44" Opacity="0.8"></SolidColorBrush>
                    </DockPanel.Background>
                    <Button Name="btnPaly" Margin="10,2" Width="20" Height="20" Click="btnPaly_Click">
                        <Image Source="..\Images\play.png"/>
                    </Button>
                    <Button Name="btnPause" Margin="10,2"  Width="20" Height="20" DockPanel.Dock="Left" Click="btnPause_Click">
                        <Image Source="..\Images\pause.png"/>
                    </Button>
                    <Button Name="btnFullscreen" Margin="4,2" Width="20" Height="20" DockPanel.Dock="Right" VerticalAlignment="Top" HorizontalAlignment="Right">
                        <Image Source="..\Images\fullscreen.png"/>
                    </Button>
                    <Button Name="btnSound" Margin="10,2,4,2" Width="20" Height="20" DockPanel.Dock="Right" Click="btnSound_Click">
                        <Grid>
                            <Image Name="imgSound" Source="..\Images\sound.png"/>
                            <Image Visibility="Collapsed" Name="imgSoundMute" Source="..\Images\sound_mute.png"/>
                        </Grid>
                    </Button>
                    <Slider VerticalAlignment="Center" Height="auto" Style="{DynamicResource SliderStyle}" Background="AliceBlue"
                        Name="ClockSlider" Interval="1000" Minimum="1" PreviewMouseLeftButtonUp="ClockSlider_PreviewMouseLeftButtonUp"
                        PreviewMouseLeftButtonDown="ClockSlider_PreviewMouseLeftButtonDown"/>
                </DockPanel>
            </Grid>
        </Grid>
    </Grid>
</UserControl>
